<template>
  <div class="config-page">
    <!-- <el-row>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </el-row>
    <config-container-vue /> -->
    <div class="box">
      <div class="c1" @click="startCapture"></div>
      <div class="c2"></div>
    </div>
  </div>
</template>

<script>
import ConfigContainerVue from "./ConfigContainer.vue";
export default {
  name: "Config",
  components: {
    ConfigContainerVue,
  },
  methods: {
    handleAdd() {},
    async startCapture(displayMediaOptions) {
      let captureStream = null;
      displayMediaOptions = {
        video: true,
        audio: true
      }
      try {
        captureStream = await navigator.mediaDevices.getDisplayMedia(
          displayMediaOptions
        );
        console.log(1);
      } catch (err) {
        console.error("Error: " + err);
      }
      return captureStream;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.box {
  display: flex;
  width: 200px;
  height: 100px;
  .c1 {
    width: 50%;
    padding: 0 10px;
    background-color: antiquewhite;
  }
  .c2 {
    width: 50%;
    background-color: aqua;
  }
}
</style>